<template>
  <div>
    <div id="echartPie" style="height: 320px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "echartsPie.vue",
  data() {
    return {
      val: {
        dts: [1,2,3,4,5,6,7,8,9,10],
        values: [11,22,33,44,55,66,77,88,99,66]
      }
    }
  },
  mounted() {
    this.drawEchartsEnginner(this.val)
  },
  methods: {
    drawEchartsEnginner() {
      var echarts = require("echarts")
      var chartCapacity = document.getElementById('echartPie')
      var capaEchart = echarts.init(chartCapacity)
      var option
      var list = [
        {
          name:'用户故事',
          value:335,
          children:[
            {name:'1',value:1}
          ]
        },
        {
          name:'产出',
          value:679,
          children:[
            {name:'反馈',value:0.2},
            {name:'提醒',value:0.8}
          ]
        },
        {
          name:'投入产出比',
          value:1548,
          children:[
            {name:'反馈',value:0.5},
            {name:'提醒',value:0.3},
            {name:'预警',value:0.2},
          ]
        }
      ]
      let innerPie = [],
        outerPie = [];
      list.map(item=>{
        innerPie.push({
          name:item.name,
          value:item.value
        })
        if(item.children){
          item.children.map(it=>{
            outerPie.push({
              name:it.name,
              value:item.value*it.value,
              percent:it.value
            })
          })
        }
      })
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          // data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '60%'],
            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: innerPie
          },
          {
            name     : '访问来源',
            type     : 'pie',
            radius   : [ '60%', '80%'],
            label    : {
              position : 'inner',
              formatter:function(params){
                return params.data.percent
              },

            },
            data: outerPie
          }
        ]
      };;
      if (option && typeof option === "object") {
        capaEchart.setOption(option, true);
      }
    }
  }
}
</script>

<style scoped>

</style>
